/*======================================Global============================================ */

* { margin: 0; padding: 0; outline: 0; }

body, html { height: 100%;}

body {
	font-family: arial, sans-serif;
	color: #000;
	font-size:12px;
	min-width: 980px;
	background-color: #262C3A;
	-webkit-box-shadow: 3px 0px 5px -2px #32394A;
	box-shadow: 3px 0px 5px -2px #32394A;
	
}

/*=================================Main Content========================================== */
/*=========================Header and Footer main===================*/
#content {
	width: 100%; 
	overflow:hidden;
	position: relative;
	margin-top: 56px;
    margin-bottom: 40px;
    z-index: -1;
	
}
#header {width: 100%;min-height: 56px;position: fixed;top: 0;left:0;background-color: #32394A;  border-bottom: 1px solid #242A37;z-index:10;}
#footer {width: 100%;height: 41px;position: fixed;bottom: 0;left:0;background-color: #32394A;  border-top: 1px solid #242A37;z-index:10;}
.header_main{width:100%;height:100%;float:left;position:relative;}
.item_header_left, .item_footer_left  {width:15px;height:56px;float:left; position:relative;}
.item_header_right, .item_footer_right{width:15px;height:56px;float:left; position:relative;}
.item_header_left img{width: 100%;height:100%;}
.item_footer_left img{width: 100%;height:100%;}
.item_header_right img{width: 100%;height:100%;}
.item_footer_right img{width: 100%;height:100%;}
.item_header_middle{
	height: 56px;
	width: -webkit-calc(100% - 30px); width: -o-calc(100% - 30px); width: -moz-calc(100% - 30px); width: calc(100% - 30px);
	background-image: url('') ;
	background-size: contain;
	float: left;
	text-align: center;
	display: table;
}
.item_footer_middle{
	height: 50px;
	width: -webkit-calc(100% - 30px); width: -o-calc(100% - 30px); width: -moz-calc(100% - 30px); width: calc(100% - 30px);

	background-image: url('');
	background-size: contain;
	float: left;
}
.outer{display: table-cell;vertical-align: middle;position: static;} /* display center Text and Image*/
.inner {	position: relative;color: white;font-size: 14px;font-weight: normal;font-style: normal;text-transform: uppercase;} /* display center Text and Image*/
.inner_header {	position: relative;color: white;font-weight: bold;font-style: normal;text-transform: uppercase;margin-top:15px;} 
.item_footer  img{width: 27px;height: 23px;margin-top: 12px;margin-left: 10px;}
#btn_menu {width: 25px;height: 25px;	background-image: url('img/button_slide.png');
background-size: contain;background-repeat: no-repeat;position:absolute;top:25px;left:8px;}/* Button to Left Site*/
#btn_menu:active, #btn_menu:hover {width: 25px;height: 25px;background-image: url('img/button_slide_active.png');
background-size: contain;background-repeat: no-repeat;position:absolute;top:25px;left:8px;} /* Button to Left Site*/

/*#btn_menu_home {width: 25px;height: 25px;	background-image: url('img/home.png');
background-size: contain;background-repeat: no-repeat;position:absolute;top:25px;left:8px;}
#btn_menu_home:active, #btn_menu_home:hover {width: 25px;height: 25px;background-image: url('img/homea.png');
background-size: contain;background-repeat: no-repeat;position:absolute;top:25px;left:8px;} 

#btn_menu_download{width: 25px;height: 25px;	background-image: url('img/download_book.png');
background-size: contain;background-repeat: no-repeat;position:absolute;float:right;top:25px;right:8px;}
#btn_menu_download:active, #btn_menu_download:hover {width: 25px;height: 25px;	background-image: url('img/download_booka.png');
background-size: contain;background-repeat: no-repeat;position:absolute;float:right;top:25px;right:8px;} Button to Left Site*/


/*=========================Content Story===================*/

#story_title {color: #fff;text-transform: uppercase;	font-family: sans-serif;font-weight: bold;}
#content ul {list-style: none;padding-left: 0px;}
.parent{border-bottom:0px solid black;position: relative;padding-left: 0px;padding-bottom: 0px;margin-left: 0px;min-height: 68px;border-top: 1px #3E4555 solid;  border-bottom: 1px #191D27 solid;}
.parent:nth-child(odd) {	background-size: contain;}/*Display difference style of story*/
.parent:nth-child(even) {background-size: contain;}/*Display difference style of story*/
.story_list_details {
	float:left;
	height:48px;
	width: -webkit-calc(100% - 20px); width: -o-calc(100% - 20px); width: -moz-calc(100% - 20px); width: calc(100% - 20px);
	padding:10px;
	display:table;
	} 
.name_story {font-size:15px; font-weight:bold; color: wheat;display:block;line-height:16px;}
.name_author {font-size:11px; color: #DBE0E8;display:block;line-height:16px;}
.info_story {font-size:11px; color: #DBE0E8;display:block;line-height:16px;}
.list_img {float:left; height:48px; width:33px;padding-right:10px;}
.list_img img {width: 100%;height:100%;}
.list_details {float:left; height:48px; }
.arrow_detail {height:20px;width:20px;}

/*=================================Left Side Content========================================== */
#header_left{width: 100%;height: 50px;background-color: none;background:transparent;position: absolute;top: 0;left:0;}
#footer_left{width: 100%;min-height: 50px;background-color: transparent;float:left;position: absolute;bottom: 0;left:0;}
.header_left_main{width:100%;height:50px;float:left;}
.item_header_left_left, .item_footer_left_left  {width:15px;height:50px;float:left;}
.item_header_left_right, .item_footer_right{width:15px;height:50px;float:right;}
.item_header_left_left img{width: 100%;height:100%;}
.item_footer_left img{width: 100%;height:100%;}
.item_header_left_right img{width: 100%;height:100%;}
.item_footer_right img{width: 100%;height:100%;}
.item_header_left_middle{
	height: 50px;
	width: -webkit-calc(100% - 30px); width: -o-calc(100% - 30px); width: -moz-calc(100% - 30px); width: calc(100% - 30px);
	background-image: url('img/4b.png');
	background-size: contain;
	float: left;
	text-align: center;
	display: table;
}
#content_left {

	width: 100%; 
	background:none;
	position: relative;
	margin-top: 50px;
    margin-bottom: 50px;
    z-index: -1;
	}
#content_left ul {list-style: none;padding-left: 0px;}
#content_left ul li {position: relative;padding-left: 0px;padding-bottom: 0px;margin-left: 0px;min-height: 68px; border-bottom:0px solid white}
#content_left img{width:100%;}
.name_story1 {font-size:13px; font-weight:bold; color:white;display:block;line-height:21px;}
.info_story1 {font-size:11px; color:white;display:block;line-height:21px;}
/*=================================Media Queries========================================== */

#btn_back_footer {width: 20px;height: 20px;	background-image: url('img/back.png');
background-size: contain;background-repeat: no-repeat;  margin-left:5px;} 
#btn_back_footer:hover,#btn_back_footer:active{width: 20px;height: 20px;background-image: url('img/backa.png');
background-size: contain;background-repeat: no-repeat; margin-left:5px;}

#btn_forward_footer {width: 20px;height: 20px;	background-image: url('img/forward.png');
background-size: contain;background-repeat: no-repeat; float:right;margin-right:5px;}
#btn_forward_footer:hover,#btn_forward_footer:active {width: 20px;height: 20px;background-image: url('img/forwarda.png');
background-size: contain;background-repeat: no-repeat; float:right;margin-right:5px; }
/*#btn_story_home {width: 25px;height: 25px;	background-image: url('img/home.png');
background-size: contain;background-repeat: no-repeat;position:absolute;top:25px;left:8px;}/* Button to Left Site/
#btn_story_home:active, #btn_story_home:hover {width: 25px;height: 25px;background-image: url('img/homea.png');
background-size: contain;background-repeat: no-repeat;position:absolute;top:25px;left:8px;} /* Button to Left Site*/  



/*=========================Chapter Li===================*/

.parent_chapter{border-bottom:0px solid black;position: relative;padding-left: 0px;padding-bottom: 0px;margin-left: 0px;
;border-top: 1px #3E4555 solid;  border-bottom: 1px #191D27 solid;min-height: 31px;line-height:31px;}
.parent_chapter:nth-child(odd) {background-image: url('');	background-size: contain; vertical-align:middle;}/*Display difference style of story*/
.parent_chapter:nth-child(even) {background-image: url('');background-size: contain;}/*Display difference style of story*/
.chapter_index {font-weight:normal; color:white;padding:8px 0px 8px 5px;font-size:13px;}
.chapter_name{font-weight:normal; color:white;padding:0px;font-size:13px;}

.parent1{border-bottom:0px solid black;position: relative;padding-left: 0px;padding-bottom: 0px;margin-left: 0px;min-height: 28px;line-height:28px;}
.parent1:nth-child(odd) {background-image: url('img/4b.png');	background-size: contain; vertical-align:middle;}/*Display difference style of story*/
.parent1:nth-child(even) {background-image: url('img/4b.png');background-size: contain;}/*Display difference style of story*/
#content_story {position: absolute;color:black;font-size:180%;text-align:justify;text-justify:inter-word;overflow-y: hidden;padding-left: 3%;padding-right: 3%; padding-bottom: 3%;
padding-top: 0.5%;width:88%;width: 96%;}
.inner_title_story {	position: relative;
color: white;
font-size: 16px;
font-weight: normal;
font-style: normal;
text-transform: none;
margin-top: 15px;
width: 100%;
margin-left: auto;
margin-right: auto;} /* display center Text and Image*/
.inner_title_chapter{	position: relative;
color: white;
font-size: 15px;
font-weight: normal;
font-style: normal;
text-transform: none;
margin-top: 15px;
width: 100%;
margin-left: auto;
margin-right: auto;} /* display center Text and Image*/
.inner_title_story img {
	
	
}
.item_story {float:left; width:10%; text-align:center;height:100%; display: table;}

#content_wraper {background:white;position: relative;}


.slidemenu {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 0px;
	height: 100%;
/*	background-color: #262C3A;
	-webkit-box-shadow: 3px 0px 5px -2px #32394A;
	box-shadow: 3px 0px 5px -2px #32394A;*/
	z-index: 2147483647;
	display: none;
	overflow: auto;
	/*-webkit-overflow-scrolling: touch;*/
}

.slidemenu h3{
	font-size:12px;
	font-family: Arial, Helvetica, sans-serif;
	color:#8C919F;
	text-shadow: 0 1px 0 #272D39;
	margin:0;
	padding:4px 0 4px 10px;
	background: rgb(67,74,94); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(67,74,94,1) 0%, rgba(57,64,82,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(67,74,94,1)), color-stop(100%,rgba(57,64,82,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(67,74,94,1) 0%,rgba(57,64,82,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(67,74,94,1) 0%,rgba(57,64,82,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(67,74,94,1) 0%,rgba(57,64,82,1) 100%); /* IE10+ */
	background: linear-gradient(top, rgba(67,74,94,1) 0%,rgba(57,64,82,1) 100%); /* W3C */
	border-top:solid #4E5567 1px;
	border-bottom:solid #242A37 1px;
}

.slidemenu ul {
	margin: 0;
	padding: 0;
	width: inherit;
}

.slidemenu ul li {
	list-style-type: none;
	margin: 0px 0;
}

.slidemenu ul li a:link, .slidemenu ul li a:visited {
	border-top: 0px #3E4555 solid;
	border-bottom: 1px #191D27 solid;
	color: #DBE0E8;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	width: 100%;
	display: block;
	padding: 10px 0px 10px 10px;
	text-shadow: 0px 1px 1px #212631;
}

.slidemenu ul li img {
	margin-right:8px;
}

.slidemenu ul li a:hover, .slidemenu ul li a:active {
	background-color: #32394A;
}
		
.ui-icon-smico {
	background-image: url("../img/smico.png") !important;
}

.slidemenu_btn .ui-icon-shadow {
	-moz-box-shadow: 0 0px 0 rgba(255,255,255,0);
	-webkit-box-shadow: 0 0px 0 rgba(255,255,255,0);
	box-shadow: 0 0px 0 rgba(255,255,255,0);
}

.slidemenu_btn .ui-btn-inner {
	border-top: 0px;
}
.slidemenu_btn .ui-icon {
	margin: 4px 1px 2px 2px !important;
	width: 25px;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	border-radius: 0px;
}

.slidemenu_btn .ui-icon, .ui-icon-searchfield::after {
	background: none;
}

.slidemenu_btn.ui-btn-icon-notext {
	width: 30px;
}

/* THESE ARE JUST EXAMPLE STYLES BELOW */

#profile {
	background-color:#32394A;
	border-bottom: 1px solid #242A37;
	overflow: hidden;
	height: 58px;
	font-family: Arial, Helvetica, sans-serif;
}

.profile_info {
	position: relative;
	left: 68px;
	top:-49px;
	font-size: 14px;
	color: #C4CCDA;
	text-shadow: 0 0px 0 black;
}

.bg{
	width:100%;
	height: 100%;
overflow-y: auto;
	background: #5a5959 url(img/menuBg.gif) top left repeat-y;
	background-size: contain;
}
















/* #### Desktops #### */
@media only screen and (min-width: 1024px){

}
/* #### Tablets Portrait or Landscape #### */
@media only screen and (min-width: 768px) and (max-width: 1024px){

{


}
}
/* #### Mobile Phones Portrait or Landscape #### */
@media only screen and (min-width: 480px)and (max-width: 768px){
	body { min-width: 480px; }
	
}
/* #### iPhone 4+ Portrait or Landscape #### */
@media only screen and (max-width: 480px){
	body { min-width: 320px;}
	
	
	
}

